{template '../service_common/header'}

<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css"/>

    <aside class="layui-side layui-bg-black">
        <section class="layui-side-scroll sidebar">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="sidebar-menu">
                <li class="treeview active">
                    <a href="javascript:;" onclick="cat_question(this)" data-type="-1" data-cid="0">
                        <i class=""></i> <span>全部</span>
                        <i class="fa fa-angle-right pull-right"></i>
                    </a>
                    {if $category_list}
                    <ul class="treeview-menu">
                        {loop $category_list $index $item}
                        <li>
                            <a href="javascript:;" data-cid="{$item['cat_id']}" onclick="cat_question(this)" data-type="0"><i class="fa fa-circle-o"></i> {$item['cat_name']} {if $item['child_list']}<i class="fa fa-angle-right pull-right"></i>{/if}</a>
                            {if $item['child_list']}
                            <ul class="treeview-menu">
                                {loop $item['child_list'] $index $v}
                                <li class=""><a href="javascript:;" data-cid="{$v['cat_id']}" onclick="cat_question(this);" data-type="1"><i class="fa fa-circle-o"></i> {$v['cat_name']}</a></li>
                                {/loop}
                            </ul>
                            {/if}
                        </li>
                        {/loop}
                    </ul>
                    {/if}
                </li>
            </ul>
        </section>
    </aside>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <form class="layui-form" action="javascript:;" method="post">
                <div class="search layui-clear">
                    <div class="layui-col-xs6" style="position: relative;">
                        <img src="{KB_WEB_FRONT_IMG}/search.png" alt="" style="position: absolute;left:12px; top:9px;">
                        <input style="padding-left:40px; " type="text" name="question" required  lay-filter="cjwtSearch" placeholder="请输入问题或关键词" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-col-xs6">
                        <button class="layui-btn" type="button" style="width: 130px; margin-left: 20px;" id="search" lay-submit lay-filter="cjwtSearch">检索</button>
                    </div>
                </div>
            </form>
            <fieldset style=" border: none;padding: 0;border-top: 1px solid #e2e2e2; margin-top:30px ">
                <legend style="margin-left: 20px; padding: 0 10px;font-size: 18px;"><a id="hr" name="hr" style="color: #757575"></a></legend>
            </fieldset>
            <ul class="searchList">

            </ul>
            <div id="page" data-page="1" style="margin-top: 30px;text-align: center"></div>
        </div>
    </div>

<script type="text/javascript">
    require(['jquery', 'layui', 'clipboard', 'common', 'sidebar-menu'], function ($, layui, Clipboard) {
        $.sidebarMenu($('.sidebar-menu'));

        initQuestion();

        layui.use(['layer', 'form', 'element'], function(){
            var form = layui.form;
            //常见问题检索按钮
            form.on('submit(cjwtSearch)', function(){
                var question = $('input[name="question"]').val();
                if (question == '') {
                    layer.msg('请输入要检索的问题');
                    return false;
                }
                initQuestion();
            })
        });

        //复制文本
        var clipboard = new Clipboard('.copy_button');
        clipboard.on('success', function(e) {
            layer.msg('复制成功');
            e.clearSelection();
        });

        //查看答案
        $('body').on('click', '.checkAnswer',function(){
            $(this).parents('.topQuestion').css('padding-bottom','0')
            $(this).parents('.topQuestion').siblings('.centerAnswer').slideDown()
        })
        //收起
        $('body').on('click','.PackUp',function(){
            $(this).parents('.centerAnswer').hide()
            $(this).parents('.centerAnswer').siblings('.topQuestion').css('padding-bottom','20px')
        })
    });

    //分类查问题
    function cat_question(obj) {
        var cat_id = $(obj).attr('data-cid');
        var cat_type = $(obj).attr('data-type');
        if (cat_type == 0) {
            $(obj).parent('li').siblings('li').removeClass('active');
            $(obj).parent('li').siblings('li').find('ul').slideUp()
            if ($(obj).siblings('ul').length == 0) {
                $(obj).parent('li').addClass('active');
            }
        } else if (cat_type == 1) {
            $(obj).parent().siblings().removeClass('active');
            $(obj).parent().addClass('active');
        }
        $('.sidebar-menu').attr('data-cid', cat_id);
        $('.sidebar-menu').attr('data-type', cat_type);
         initQuestion();
    }

    //初始化问题数据
    function initQuestion() {
        var cat_id = $('.sidebar-menu').attr('data-cid'),
            page = $('#page').attr('data-page'),
            question = $('input[name="question"]').val();

        var data = {
            cat_id: cat_id,
            page: page,
            question: question,
        };
        $.post("{php echo $this->createWebUrl('service', array('act' => 'question'))}", data, function (data) {
            $('#hr').text(data.cat_name);
            layui.use(['laypage'], function () {
                var laypage = layui.laypage;
                //总页数大于页码总数
                laypage.render({
                    elem: 'page',
                    count: data.pages.total, //数据总数
                    limit: data.pages.limit,
                    curr: data.pages.page,
                    layout: ['prev', 'page', 'next', 'skip'],
                    jump: function(obj, first){
                        if (!first) {
                            var curr = obj.curr;
                            $('#page').attr('data-page', curr);
                            initQuestion();
                        }
                    }
                });
            });

            if (data.question_list.length > 0) {
                var html = '';
                $.each(data.question_list, function (index, item) {
                    html += '<li>' +
                        '<div class="topQuestion">' +
                        '<div class="l">' +
                        '<img src="{KB_WEB_FRONT_IMG}/q.png" alt="">' +
                        '<div class="title">' + item.question + '</div>' +
                        '</div>' +
                        '<div class="r">' +
                        '<button class="layui-btn checkAnswer" type="button" style="width: 112px; margin-top: 30px;">查看答案</button>' +
                        '</div>' +
                        '</div>' +
                        '<div class="centerAnswer">' +
                        '<div class="content">' +
                        '<div class="l target'+ item.question_id + '">' +
                        item.answer_all +
                        '</div>' +
                        '<div class="r">' +
                        '<button class="layui-btn copy_button" type="button" style="width: 112px; border: 1px solid #fff;background: #fff;color: #55c33b" ata-clipboard-action="copy" data-clipboard-target=".target'+ item.question_id +'">复制</button>' +
                        '<button class="layui-btn PackUp" type="button" style="width: 112px; border: 1px solid #fff;background: #fff;color: #55c33b;margin-left:0;margin-top: 10px;">收起</button>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '<div class="bottomType">' +
                        '<span>分类：' + item.cat_name + '</span>' +
                        '<span class="hVer"></span>' +
                        '<span>标签：' + item.label_name + '</span>' +
                        '</div>' +
                        '</li>';
                });
                $('.searchList').html(html);
            } else {
                $('#page').css('display', 'none');
                $('.searchList').html('');
            }

        });
    }
</script>

{template '../service_common/footer'}